import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
  Table, Grid, Menu, Breadcrumb, Input, Dropdown, Image, Checkbox,
} from 'semantic-ui-react'
import { push } from 'connected-react-router'

class Nav extends Component {
  splitPath = (path) => {
    if (path) {
      const array = path.split('/')
      let ele = ''
      const result = []
      for (let i = 0; i < array.length; i += 1) {
        ele += array[i]
        result.push({ path: ele, text: array[i] })
        ele += '/'
      }
      return result
    }
    return []
  }

  render() {
    const {
      path, homePath, homeText, linkTo, defaultSections,
    } = this.props
    const sections = this.splitPath(path)
    return (
      <Breadcrumb size="large">
        <Breadcrumb.Section link onClick={() => linkTo(homePath)}>
          {homeText}
        </Breadcrumb.Section>
        <Breadcrumb.Divider />
        {sections.map(section => (
          <React.Fragment>
            <Breadcrumb.Section link onClick={() => linkTo(`${homePath}/${section.path}`)}>
              {section.text}
            </Breadcrumb.Section>
            <Breadcrumb.Divider />
          </React.Fragment>
        ))}
        {defaultSections
          && defaultSections.map(section => (
            <React.Fragment>
              <Breadcrumb.Section link onClick={() => linkTo(`${homePath}/${section.path}`)}>
                {section.text}
              </Breadcrumb.Section>
              <Breadcrumb.Divider />
            </React.Fragment>
          ))}
      </Breadcrumb>
    )
  }
}

const mapStateToProps = (state, ownProps) => ({})

const mapDispatchToProps = {
  linkTo: path => push(path),
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Nav)
